<template>
  <common-edit-dialog
    :title="dialogTitle"
    :visible.sync="dialogShow"
    @cancel="dialogShow = false"
    @submit="submitForm"
    :button-loading="isPersistenceLoading"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="CPU(百分比)：" prop="cpuLimit">
            >
            <common-input-integer
              v-model="form.cpuLimit"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="内存(百分比)：" prop="memLimit">
            >
            <common-input-integer
              v-model="form.memLimit"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="磁盘(百分比)：" prop="diskLimit">
            >
            <common-input-integer
              v-model="form.diskLimit"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="告警频率：" prop="alarmRate">
            <common-input-number
              :max-length="2"
              v-model="form.alarmRate"
              placeholder="请输入"
            />&nbsp; 分钟/次
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </common-edit-dialog>
</template>

<script>
import { RuleEdit } from "@/api/system/monitor";

export default {
  components: {},
  props: {},
  data() {
    return {
      isPersistenceLoading: false,
      dialogTitle: "编辑服务监控策略", // 标题
      dialogShow: false, // 是否显示
      form: {
        id: "",
        cpuLimit: "0", //cpu
        memLimit: "0", //内存

        diskLimit: "0", //磁盘
        alarmRate: 0, //频次
        ruleType: 0,
      },
      rules: {
        cpuLimit: [
          {
            required: true,
            message: "请输入CPU阈值",
            trigger: "blur",
          },
        ],
        memLimit: [
          {
            required: true,
            message: "请输入内存阈值",
            trigger: "blur",
          },
        ],
        diskLimit: [
          {
            required: true,
            message: "请输入磁盘阈值",
            trigger: "blur",
          },
        ],
        alarmRate: [
          {
            required: true,
            message: "请输入告警频次",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    /**
     * 关闭
     */
    close() {
      this.dialogShow = false;
    },
    /**
     * 显示
     */
    show(data) {
      this.form = data.id
        ? {
            id: data.id,
            cpuLimit: data.cpuLimit,
            memLimit: data.memLimit,
            diskLimit: data.diskLimit,
            alarmRate: +data.alarmRate,
            ruleType: 0,
          }
        : this.$options.data().form;
      this.dialogShow = true;
    },
    /**
     * 提交
     */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.isPersistenceLoading = true;
          RuleEdit(this.form)
            .then((res) => {
              if (res && res.code === 200) {
                this.$GlobalSuccessMessage("编辑成功");
                this.$emit("submitForm");
                this.dialogShow = false;
              } else {
                this.$GlobalErrorConfirm("编辑失败", res.msg);
              }
            })
            .finally(() => {
              this.isPersistenceLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
